<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .boxbobo {
    width: 200px;
    height: 300px;
    background-color: red;
  }
</style>

<body>
  <div id="app"></div>
  <div id="mark"></div>
</body>
<!-- 引入 js 文件 -->
<!-- React 核心的交互代码 -->
<script src="./node_modules//react/umd/react.development.js"></script>
<!-- React dom 渲染的核心代码 -->
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<!-- 导入 Babel 插件，作用是将高版本的 JSX 语法进行低版本兼容 -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel">

  // class 组件 (基于面向对象的组件)
  class Welcome_class extends React.Component{
    // 构造函数:用来返回一个组件对象; props 用来接收外界
    constructor(props){
      super(props); // 向自定义组件实例内部添 (this) 加一个 props 属性,将自定义属性中的数据提供给该组件实例;

      // 初始化状态数据 \ 私有数据源,只维护当前组件的状态
      this.state = {
        show:true
      };
      // 直接绑定 this 指向; bind 用来完成函数 this 的绑定,可以将函数直接绑定给指定的对象进行调用同时
      // bind 绑定的 this 不管函数交给任何组件调用, this 都不会发生变化
      this.hideOrShow = this.hideOrShow.bind(this)
      this.boxOrCeshi = this.boxOrCeshi.bind(this)
    }
    
    boxOrCeshi(){
      console.log('外层 div 被点击')
    }

    // 定义函数完成点击操做
    hideOrShow(){
      console.log('按钮被点击!!!');
      console.log(this)
      // 方案 A
      // return ()=>{
      //   console.log(this)
      // }
      // 方案 B :绑定 bind 指向
      // 更改私有状态值(回调函数)
      // setState 接收两种格式:一种对象格式(适用于短时间内更新频率不高的状态数据更新,因此 state 状态数据更改是异步操做;如果更改频率过高,此时会出现多个状态值一次性合并更改,因此状态表现可能出现卡顿现象) \ 一种式回调函数格式( state 参数代表本次状态更改之前的上一刻状态, props 参数代表当前组件的属性值,该模式可以保证状态值的更改每一次都依托上一刻的状态)
      this.setState((state,props)=>{
        return {
          show: !state.show
        }
      })

    }

    // render 用来设置当前 class 组件对应返回的一段 HTML 结构
    render(){
      let mark = null;
      if(this.state.show){
        mark = <p>{this.props.msgA}</p>;
      }
      return(
        <div>
          <h3>姓名:{this.props.name}</h3>
          <p>性别:{this.props.sex}</p>
          <p  >{this.state.show ? this.props.msg :null}</p>
          {mark}
          {this.state.show ? <p>{this.props.msgB}</p>:null}
          <div className="boxbobo" onClick={this.boxOrCeshi} >
            <button onClick={this.hideOrShow}>隐藏</button>
          </div>
        </div>
      );
    }
  }

    // 创建一个步进器组件
class shopBox extends React.Component {

render(){
  // 返回当前组件对应的 DOM 结构
  return (
    <div class="shopbox">
      <div class="shop_left">
        <img class="image_box" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F18%2F08%2F24%2F05dbcc82c8d3bd356e57436be0922357.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1635306702&t=50e9739b9bcd4a1b2634a77a641f8f40" alt="" />
      </div>
      <div class="shop_right">
        <div class="explain_box">蓝鸥牌大月饼</div>
        <div class="explain_box">又干又酥又噎人</div>
        <div class="explain_box">
          <span>原价：￥5000.00元</span>
          <span>现价：￥0.01元</span>
        </div>
      </div>
    </div>
  )
}
}

  ReactDOM.render(<Welcome_class name="class 组件" sex="男" msg="这是基于面向对象的组件" msgA="私有数据源A" msgB="私有数据源B"/>,document.querySelector('#mark'));
</script>

</html>